<template>
  <div style="padding: 20px">
    <el-card class="box-card box-card-width">
      <p style="font-weight: 600; font-size: 20px">修改额外设置</p>
      <el-form
        ref="khadd"
        :model="queryParam"
        :rules="ywkrules"
        label-width="110px"
        class="demo-ruleForm"
      >
        <el-card class="box-card">
          <el-row>
            <el-col :span="24">
              <el-form-item label="覆膜工艺:"></el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12" :xs="22">
              <el-form-item label="亮膜:" prop="liang">
                <el-input
                  v-model="queryParam.liang"
                  type="number"
                  style="width: 100%"
                  clearable
                  step="0.01"
                  placeholder="请输入"
                >
                  <template slot="append">元/平方米</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :xs="22">
              <el-form-item label="哑膜:" prop="ya">
                <el-input
                  v-model="queryParam.ya"
                  style="width: 100%"
                  type="number"
                  clearable
                  step="0.01"
                  placeholder="请输入"
                >
                  <template slot="append">元/平方米</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :xs="22">
              <el-form-item label="镭射膜:" prop="lei">
                <el-input
                  v-model="queryParam.lei"
                  type="number"
                  style="width: 100%"
                  show-word-limit
                  step="0.01"
                  clearable
                  placeholder="请输入"
                >
                  <template slot="append">元/平方米</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :xs="22">
              <el-form-item label="转移:" prop="zhuan">
                <el-input
                  v-model="queryParam.zhuan"
                  style="width: 100%"
                  type="number"
                  step="0.01"
                  clearable
                  placeholder="请输入"
                >
                  <template slot="append">元/平方米</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card class="box-card">
          <el-row>
            <el-col :span="12" :xs="22">
              <el-form-item label="上油:" prop="shang">
                <el-input
                  v-model="queryParam.shang"
                  type="number"
                  style="width: 100%"
                  step="0.01"
                  clearable
                  placeholder="请输入"
                >
                  <template slot="append">元/平方米</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :xs="22">
              <el-form-item label="击凸:" prop="ji">
                <el-input
                  v-model="queryParam.ji"
                  style="width: 100%"
                  step="0.01"
                  type="number"
                  clearable
                  placeholder="请输入"
                >
                  <template slot="append">元/万张</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :xs="22">
              <el-form-item label="逆向UV:" prop="ni">
                <el-input
                  v-model="queryParam.ni"
                  type="number"
                  style="width: 100%"
                  step="0.01"
                  show-word-limit
                  clearable
                  placeholder="请输入"
                >
                  <template slot="append">元/平方米</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>
      <div class="footer-box">
        <el-button type="primary" @click="submit_apply">保 存</el-button>
        <el-button @click="getSetDetail">重 置</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
const patrnNumber = /^(?:(?:\+|00)86)?1\d{10}$/
let validatorNumber = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入'))
  } else if (!patrnNumber.test(value)) {
    callback(new Error('请输入正确的电话号'))
  } else {
    callback()
  }
}
import { setDetail, editSetDetail } from '@/api/admin.js'
export default {
  data() {
    return {
      queryParam: {
        liang: '',
        ya: '',
        lei: '',
        zhuan: '',
        shang: '',
        ji: '',
        ni: '',
      },
      loading: false,
      ywkrules: {},
      basic_processes: {},
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getSetDetail()
  },
  methods: {
    async getSetDetail() {
      let data = await setDetail()
      if (data.code == 200) {
        if (!data.extra_processes) return
        this.queryParam.liang = data.extra_processes.亮膜
        this.queryParam.ya = data.extra_processes.哑膜
        this.queryParam.lei = data.extra_processes.镭射膜
        this.queryParam.zhuan = data.extra_processes.转移
        this.queryParam.shang = data.extra_processes.上油
        this.queryParam.ji = data.extra_processes.击凸
        this.queryParam.ni = data.extra_processes.逆向UV
        this.basic_processes = data.basic_processes
      }
    },

    submit_apply() {
      this.$refs['khadd'].validate(async (valid) => {
        if (valid) {
          this.$confirm('是否继续此操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(async () => {
              this.loading = true
              let params = {
                extra_processes: {
                  亮膜: this.queryParam.liang,
                  哑膜: this.queryParam.ya,
                  镭射膜: this.queryParam.lei,
                  转移: this.queryParam.zhuan,
                  上油: this.queryParam.shang,
                  击凸: this.queryParam.ji,
                  逆向UV: this.queryParam.ni,
                },
                basic_processes: this.basic_processes,
              }
              let data = await editSetDetail(params)
              if (data.code == 200) {
                this.$baseMessage('操作成功', 'success')
              }
              this.loading = false
            })
            .catch(() => {})
        } else {
          return false
        }
      })
    },
  },
}
</script>
<style scoped lang="scss">
.box-card-width {
  @media screen and (max-width: 768px) {
    width: 400px;
  }
}

.footer-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-box {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #c0ccda;
  cursor: pointer;
}
.live-style-item {
  float: right;
  color: #8492a6;
  font-size: 13px;
  max-width: 200px;
}

.bind-box {
  padding: 0 0 20px;
}

.bind-box-table {
  padding: 0 0 20px;
}

.footer {
  text-align: center;
  padding: 10px 0 45px;

  & > :nth-child(n + 2) {
    margin-left: 14px;
  }

  button {
    width: 106px;
    height: 48px;
  }
}
</style>
